<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>formSelects 4.x 多选框 formSelects - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="基于 layui 的 select 多选解决方案。支持：多选、分组、取值&amp;赋值、选择监听、搜索、启用&amp;禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、 远程搜索、动态数据、动态创建、 搜索过滤 、快捷操作、选项模板 、多级联动等。"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>formSelects 4.x 多选框</a> <span class="layui-badge layui-bg-green layui-hide-xs">formSelects</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/2196264/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">ma**i</cite> <img src="/avatar/2196264.jpg" alt="ma**i"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>基于 layui 的 select 多选解决方案。支持：多选、分组、取值&amp;赋值、选择监听、搜索、启用&amp;禁用、多选皮肤、重复选、下拉方向、显示数量、选择数、 远程搜索、动态数据、动态创建、 搜索过滤 、快捷操作、选项模板 、多级联动等。</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2020-7-23 </span> <span class="layui-inline">创建：2018-8-28 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
       <li lay-id=""> <a href="https://hnzzmsf.github.io/example/example_v4.html" rel="nofollow" target="_blank"> <i class="iconfont icon-kaifashili"></i> 来源 </a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text"> 
       <div class="layui-elem-quote">
         formSelects停止维护, 新开发 <a href="/extend/xmSelect/" target="_blank">xm-select</a> , 稳定强大速度快 , 已迁移至全新版本 <a href="https://maplemei.gitee.io/xm-select/#/component/install" target="_blank" rel="nofollow">xm-select文档地址</a>
       </div>使用方式：
       <br>
       <hr>
       <pre>//1.下载formSelects-v4<br> <br>//2.模块化使用<br>&lt;script src="layui.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;<br>&lt;script type="text/javascript"&gt;<br>    //全局定义一次, 加载formSelects<br>    layui.config({<br>        base: '../src/' //此处路径请自行处理, 可以使用绝对路径<br>    }).extend({<br>        formSelects: 'formSelects-v4'<br>    });<br>    //加载模块<br>    layui.use(['jquery', 'formSelects'], function(){<br>        var formSelects = layui.formSelects;<br>         <br>    });<br>&lt;/script&gt;<br> <br>//3.非模块化使用<br>&lt;script src="layui.all.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;<br>&lt;script src="formSelects-v4.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;<br>&lt;script type="text/javascript"&gt;<br>    var formSelects = layui.formSelects;<br>     <br>&lt;/script&gt;</pre>基本参数
       <br>
       <hr>
       <pre>属性名	说明	  示例<br>xm-select	多选核心, 标记不同的多选, 多选ID	xm-select="id"<br>xm-select-max	多选最多选择数量	xm-select-max="3"<br>xm-select-skin	皮肤	xm-select-skin=" default | primary | normal | warm | danger "<br>xm-select-search	本地搜索 &amp; 远程搜索	xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索<br>xm-select-create	条目不存在时创建, 标记性属性	xm-select-create<br>xm-select-direction	下拉方向	xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式<br>xm-select-height	标记select高度是否固定	xm-select-height="36px", 高度不再随数据变化而变化<br>xm-select-radio	单选模式	xm-select-radio, 最多只能选择一个<br>xm-select-search-type	搜索框的显示位置	xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示<br>xm-select-show-count	多选显示的label数量	xm-select-show-count="2", 超出后隐藏</pre>部分效果
       <br>
       <hr>基础多选
       <br>
       <img src="/upload/2018_6/2196264_1529670642441_22111.png"> 
       <br>
       <br>pane模式
       <br>
       <img src="/upload/2018_6/2196264_1529670655394_38604.gif"> 
       <br>
       <br>多种颜色
       <br>
       <img src="/upload/2018_6/2196264_1529670676245_18868.png"> 
       <br>
       <br>支持搜索, 图太大, 不让传...
       <br>
       <br>支持动态创建, 图太大, 不让传...
       <br>
       <br>单选模式
       <br>
       <img src="/upload/2018_6/2196264_1529670755338_32391.png"> 
       <br>
       <br>自定义搜索规则
       <br>
       <img src="/upload/2018_6/2196264_1529670787779_92986.gif"> 
       <br>
       <br>联动多选
       <br>
       <img src="/upload/2018_6/2196264_1529825299893_52913.gif"> 
       <br>
       <br>更多文档见： <a href="https://hnzzmsf.github.io/example/example_v4.html" target="_blank" rel="nofollow">https://hnzzmsf.github.io/example/example_v4.html</a> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="/hnzzmsf/layui-formSelects/archive/master.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="https://github.com/hnzzmsf/layui-formSelects" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-black"> 去 GitHub 下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>